<template>
  <div class="login">
    <div class="login-from animate__animated animate__backInRight">
      <div class="login-title">SIGN IN</div>
      <el-form
        :model="form"
        size="default"
        :rules="rules"
        ref="ruleFormRef"
        class=""
      >
        <el-form-item prop="emali">
          <el-input v-model="form.emali" :prefix-icon="Avatar" clearable />
        </el-form-item>
        <el-form-item prop="passworld">
          <el-input :type="inptType" v-model="form.passworld" clearable>
            <template #prefix>
              <i class="iconfont icon-mima"></i>
            </template>
            <template #suffix>
              <el-icon
                class="el-input__icon"
                v-if="inptType === 'password' && form.passworld"
                ><Hide @click="show"
              /></el-icon>
              <el-icon
                class="el-input__icon"
                v-if="inptType === 'text' && form.passworld"
                ><View @click="hide"
              /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input style="width: 60%" v-model="form.code" clearable>
            <template #prefix>
              <i class="iconfont icon-yanzhengyanzhengma"></i>
            </template>
          </el-input>
          <img
            src="../../assets/login/codes.webp"
            alt=""
            width="100"
            style="margin-left: 20px"
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox
            v-model="checkedpass"
            label="Automatic login"
            size="large"
          />
          <el-link type="primary" :underline="false">Reset password ?</el-link>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit(ruleFormRef)"
            class="text-blue-500"
          >
            SIGN IN</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 其他登录 -->
      <other></other>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { Calendar, Avatar, Hide, View } from '@element-plus/icons-vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import other from './components/other.vue'
const components = {
  other,
}
// do not use same name with ref
const form = reactive({
  emali: '',
  passworld: '',
  code: '',
})
const ruleFormRef = ref<FormInstance>()
// 自定义验证规则
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password'))
  } else {
    if (form.code !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('code', () => null)
    }
    callback()
  }
}
// 表单校验规则
const rules = reactive<FormRules>({
  emali: [
    { required: true, message: 'Please input Activity emali', trigger: 'blur' },
  ],
  passworld: [
    {
      required: true,
      message: 'Please select Activity passworld',
      trigger: 'blur',
    },
  ],
  code: [
    {
      validator: validatePass,
      trigger: 'blur',
    },
  ],
})
const inptType = ref('password')
const checkedpass = ref(true)
const show = () => {
  inptType.value = 'text'
}
const routers = useRouter()
const hide = () => {
  inptType.value = 'password'
}
const success = async () => {
  ElMessage({ message: 'login successfully', type: 'success' })
  await routers.push('/home')
}
const error = () => {
  ElMessage({ message: 'error', type: 'error' })
  form.code = ''
}
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      setTimeout(() => {
        if (form.code === '0413' && form.emali && form.passworld) {
          if (checkedpass.value === true) {
            localStorage.setItem('emali', form.emali)
            localStorage.setItem('passworld', form.passworld)
          }
          localStorage.setItem('token', '12313213123')
          //   获取url中的参数
          if (window.location.href.indexOf('Return')) {
            routers.push(
              window.location.href.substring(
                window.location.href.indexOf('Return')
              )
            )
          } else {
            success()
          }
        } else {
          error()
        }
      }, 100)
    } else {
      error()
      console.log('error submit!', fields)
    }
  })
}
const pass = onMounted(() => {
  if (localStorage.getItem('emali') && localStorage.getItem('passworld')) {
    form.emali = localStorage.getItem('emali') || ''
    form.passworld = localStorage.getItem('passworld') || ''
  }
})
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100vh;
  position: relative;
  background: url('../../assets/login/bg.png'), no-repeat;
  background-size: cover;
  .login-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
  }
  .login-from {
    float: right;
    margin: 60px 6% 0 0;
    width: 350px;
    padding: 40px 20px 68px 20px;
    background: #fafafa;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;

    .el-form-item {
      margin-bottom: 26px;
      .el-button {
        width: 100%;
        border-radius: 20px;
      }
      .el-form-item__content {
        .el-input__wrapper {
          border-radius: 20px;
        }
        .el-link {
          font-size: 10px;
          width: calc(100% - 118px);
          .el-link__inner {
            width: 100%;
            justify-content: flex-end;
          }
        }
      }
    }
  }
}
</style>
